<template>
  <div class="storerm">
    <IEcharts
      :loading="loading"
      :option="pie"
      @ready="onReady"
    />
  </div>
</template>

<style>
  /**
   * 默认尺寸为 600px×400px，如果想让图表响应尺寸变化，可以像下面这样
   * 把尺寸设为百分比值（同时请记得为容器设置尺寸）。
   */
  .storerm {
    width: 100%;
    height: 200px;
    /*margin: 3px 0;*/
    background: #fff;
  }
</style>

<script type="text/babel">
  import IEcharts from 'vue-echarts-v3/src/full.js';
  export default {
    name: 'PieChart2',
    components: {
      IEcharts
    },
    props: [
      'srdata',
      'type',
      'srgname',
      'codes'
    ],
    data() {
      let that = this;
      return {
        loading: true,
        pie: {
          title: {
            text: '',
            textStyle: {
              fontSize: 14,
              fontWeight: 100,
            },
            top: 5
          },
          tooltip: {
            trigger: 'item',
            // alwaysShowContent: true,
            confine: true,
            //formatter: "{a} <br/>{b} : {c} ({d}%)",
            formatter:function(params){
              if (that.codes != undefined) {
                let index = params.name.replace('TD', '');
                return that.codes[index] + '(' + params.name + '): ' + params.value + ' (' + params.percent + '%)';
              } else {
                return params.name + ': ' + params.value + ' (' + params.percent + '%)';
              }
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            show: false
          },
          yAxis: {
            show: false
          },
          series : [{
            name: '',
            type: 'pie',
            radius: '55%',
            data:[]
          }],

        },
        instance: ''
      }
    },
    created() {
    },
    mounted() {
      this.pie.series[0].data = this.srdata;
      this.pie.title.text = this.ctitle(this.type);
    },
    watch: {
      'srdata': function (val) {
        this.pie.series[0].data = this.srdata;
        // let that = this;
        // setTimeout(function () {
        //   that.instance.dispatchAction({
        //     type: 'showTip',
        //     seriesIndex: 0,//第几条series
        //     dataIndex: 0,//第几个tooltip
        //   })
        // })
      }
    },
    methods: {
      setSrdata: function() {},
      ctitle: function(type = 1) {
        let typename = '';
        switch (type) {
          case 1:
            typename = '成本';
            break;
          case 2:
            typename = '收入';
            break;
          case 3:
            typename = '利润';
            break;
        }
        return typename;
      },
      onReady: function(instance, ECharts) {
        this.loading = false;
        // this.instance = instance;
        // setTimeout(function () {
        //   instance.dispatchAction({
        //     type: 'showTip',
        //     seriesIndex: 0,//第几条series
        //     dataIndex: 0,//第几个tooltip
        //   })
        // })

      },
    }
  };
</script>
